<template>
  <a-modal :visible="visible" title="线索配置" @ok="saveClueConfig" @cancel="onCancel"
           destroy-on-close>
    <div class="item">
      <span>渠道提交线索审批</span>
      <a-tooltip>
        <template #title
        >
          <div>1.当开启审核，则会在该机构的租客审批应用中创建一个内置的"新增线索申请"</div>
          <div>2.只有开启了渠道提交线索审批，渠道提交线索时才会进入审批流程</div>
        </template
        >
        <question-circle-outlined class="ml-5"/>
      </a-tooltip>

      <a-switch style="float: right" v-model:checked="typeOneStatus" :checked-value="1"
                :un-checked-value="0"/>
    </div>
    <a-divider/>
    <div class="item">
      <span>员工提交线索审批</span>
      <a-tooltip>
        <template #title
        >
          <div>1.当开启审核，则会在该机构的审批应用中创建一个内置的"新增线索申请"</div>
          <div>2.只有开启了员工提交线索审批，员工提交线索时才会进入审批流程</div>
        </template
        >
        <question-circle-outlined class="ml-5"/>
      </a-tooltip>

      <a-switch style="float: right" v-model:checked="typeTwoStatus" :checked-value="1"
                :un-checked-value="0"/>
    </div>
    <a-divider/>
    <div class="item">
      <span>员工提交客户审批</span>
      <a-tooltip>
        <template #title
        >
          <div>1.当开启审核，则会在该机构的审批应用中创建一个内置的"新增客户申请"</div>
          <div>2.只有开启了员工提交客户审批，员工提交客户时才会进入审批流程</div>
        </template
        >
        <question-circle-outlined class="ml-5"/>
      </a-tooltip>

      <a-switch style="float: right" v-model:checked="typeThreeStatus" :checked-value="1"
                :un-checked-value="0"/>
    </div>
    <a-divider/>
    <div class="item">
      <span>渠道报备线索启用前三后四</span>
      <a-tooltip>
        <template #title
        >
          <div>不开启则渠道报备线索只能填写全号码</div>
        </template
        >
        <question-circle-outlined class="ml-5"/>
      </a-tooltip>

      <a-switch style="float: right" v-model:checked="typeFourStatus" :checked-value="1"
                :un-checked-value="0"/>
    </div>
    <a-divider/>


  </a-modal>
</template>
<script>
import {defineComponent, ref, watch, toRefs, reactive} from 'vue';
import request from '@/common/utils/request'
import {QuestionCircleOutlined} from '@ant-design/icons-vue'
import {message} from 'ant-design-vue'
import store from '@/store'

export default defineComponent({
  components: {QuestionCircleOutlined},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ["handleClose"],
  setup(props, context) {

    const state = reactive({
      typeOneStatus: 0,
      typeTwoStatus: 0,
      typeThreeStatus: 0,
      typeFourStatus: 0,
    })


    const getClueConfig = () => {

      store.dispatch("GET_BUSINESS_CONFIG").then(res => {
        const config = res;
        if (config) {
          config.forEach(item => {
            if (item.type == 1) {
              state.typeOneStatus = item.status
            } else if (item.type == 2) {
              state.typeTwoStatus = item.status
            } else if (item.type == 3) {
              state.typeThreeStatus = item.status
            } else if (item.type == 4) {
              state.typeFourStatus = item.status
            }
          })
        }
      });

    }

    const saveClueConfig = () => {
      const param = []
      param.push({type: 1, status: state.typeOneStatus})
      param.push({type: 2, status: state.typeTwoStatus})
      param.push({type: 3, status: state.typeThreeStatus})
      param.push({type: 4, status: state.typeFourStatus})
      request.post("/org", "/business/clue/setClueApprovalConfig", {contentConfig: param}).then(res => {
        message.success("设置成功")
        context.emit("handleClose")

      })

    }

    const onCancel = () => {
      context.emit("handleClose")
    }

    const init = () => {
      getClueConfig()
    }

    watch(() => props.visible, (val) => {
      if (val == true) {
        init()
      }
    })
    return {
      saveClueConfig,
      onCancel,
      ...toRefs(state),

    };
  },
});
</script>

<style lang="less" scoped>

.ant-divider-horizontal {
  margin: 10px 0;
}
</style>